<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white pb30 plr30 pt30 m-list-flex">
			<view class="price m-cell-bd">
				<text class="fs24 col5">合计</text>
				<text class="fs22">¥</text>
				<text class="fs34 fwb">{{order.pay_price}}</text>
			</view>
			<view v-if="order.pay_status == 1" class="foot-btn1" @click="orderCancel">取消订单</view>
			<view v-if="order.pay_status == 1" class="foot-btn2" @click="choosePackageOrder">立即支付</view>
			<view v-if="order.pay_status == 1 && order.cert_up==0 && order.pay_type==3" class="foot-btn2"
				@click="certUp">提交凭证</view>
		</view>
		<view class="container bg-white p30">
			<view class="box">
				<view class="fs34 fwb mb25">{{order.package_name}}</view>
				<view class="m-list-flex tc data">
					<view class="m-cell-bd">
						<view class="fs34 mb15">{{order.job_publish_num}}</view>
						<view class="fs24 key">发布职位</view>
					</view>
					<view class="m-cell-bd">
						<view class="fs34 mb15">{{order.resume_view_num}}</view>
						<view class="fs24 key">查看简历</view>
					</view>
					<view class="m-cell-bd">
						<view class="fs34 mb15">{{order.interview_num}}</view>
						<view class="fs24 key">邀请面试</view>
					</view>
					<view class="m-cell-bd">
						<view class="fs34 mb15">{{order.job_refresh_num}}</view>
						<view class="fs24 key">刷新职位</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="m-list-flex mb30">
					<view class="fs34 fwb m-cell-bd">支付信息</view>
					<view :class="[order.pay_status=='1'?'status1':(order.pay_status=='2'?'status2':'status3')]">
						{{order.pay_status_text}}
					</view>
				</view>
				<view class="m-list-flex fs30 mb40">
					<view class="col5 m-cell-bd">订单号</view>
					<view>{{order.order_no}}</view>
				</view>
				<view class="m-list-flex fs30 mb40">
					<view class="col5 m-cell-bd">支付方式</view>
					<image class="icon1" v-if="order.pay_type == 3" src="https://admin.mosizp.cn/static/public/z_icon2.png" mode="aspectFit">
					</image>
					<view v-if="order.pay_type == 3">线下支付</view>
					<image class="icon1" v-if="order.pay_type == 1" src="https://admin.mosizp.cn/static/public/z_icon1.png" mode="aspectFit">
					</image>
					<view v-if="order.pay_type == 1">微信支付</view>
				</view>
				<view class="m-list-flex fs30 mb40">
					<view class="col5 m-cell-bd">下单时间</view>
					<view>{{formatDatetime(order.createtime,'mm.dd hh:ii')}}下单</view>
				</view>
				<view class="m-list-flex fs30 mb40">
					<view class="col5 m-cell-bd">支付金额</view>
					<view>
						<text class="fs22">¥</text>
						<text class="fs34 fwb">{{order.pay_price}}</text>
					</view>
				</view>
				<view class="price tr">
					<text class="fs24 col5">合计</text>
					<text class="fs22">¥</text>
					<text class="fs34 fwb">{{order.pay_price}}</text>
				</view>
			</view>
			<view class="box" v-if="order.pay_type==3">
				<view class="fs34 fwb mb30">收款信息</view>
				<view class="m-list-flex fs28 mb40">
					<view class="col5 m-cell-bd">公司名称</view>
					<view>{{order.corporate_company}}</view>
				</view>
				<view class="m-list-flex fs28 mb40">
					<view class="col5 m-cell-bd">开户行</view>
					<view>{{order.open_bank}}</view>
				</view>
				<view class="m-list-flex fs28">
					<view class="col5 m-cell-bd">开户账号</view>
					<view>{{order.corporate_account}}</view>
				</view>
			</view>
			<view class="box">
				<view class="fs34 fwb mb30">付款凭证</view>
				<view class="m-list-flex" @click="uploadCert">
					<view class="up-btn mr30" v-if="!order.cert && !cert">
						<view>点击上传</view>
						<view>付款凭证</view>
					</view>
					<image :src="order.cert || cert" class="img-up" mode="aspectFill"></image>
				</view>
			</view>
		</view>


		<view class="zz" v-if="showPop" @click="togglePop"></view>
		<view class="pay-pop" v-if="showPop">
			<view class="fs34 mb30 tc">确认支付</view>
			<view class="m-list-flex mb30">
				<view class="m-cell-bd fs30 col5">套餐名称</view>
				<view class="fs34">{{order.package_name}}</view>
			</view>
			<view class="m-list-flex mb40">
				<view class="m-cell-bd fs30 col5">支付金额</view>
				<view class="price">
					<text class="fs22">¥</text>
					<text class="fs34">{{order.pay_price}}</text>
				</view>
			</view>
			<view class="fs36 tc mb40">- 支付方式 -</view>
			<view class="pay-item" @click="payClick(1)">
				<view class="m-list-flex">
					<image class="icon1" src="https://admin.mosizp.cn/static/public/z_icon1.png" mode="aspectFit"></image>
					<view class="fs30 m-cell-bd">线上支付</view>
					<image class="icon2" :src="iconPath(payIdx==1?'choose_sc.png':'choose_uc.png')" mode="aspectFit">
					</image>
				</view>
			</view>
			<view class="pay-item" @click="payClick(3)">
				<view class="m-list-flex">
					<image class="icon1" src="https://admin.mosizp.cn/static/public/z_icon2.png" mode="aspectFit"></image>
					<view class="fs30 m-cell-bd">线下支付</view>
					<image class="icon2" :src="iconPath(payIdx==3?'choose_sc.png':'choose_uc.png')" mode="aspectFit">
					</image>
				</view>
				<view class="info-box" v-if="payIdx == 3">
					<view class="fs30 mb30">收款信息</view>
					<view class="m-list-flex mb40">
						<view class="m-cell-bd">公司名称</view>
						<view>{{config.corporate_company}}</view>
					</view>
					<view class="m-list-flex mb40">
						<view class="m-cell-bd">开户行</view>
						<view>{{config.open_bank}}</view>
					</view>
					<view class="m-list-flex">
						<view class="m-cell-bd">开户账号</view>
						<view>{{config.corporate_account}}</view>
					</view>
				</view>
			</view>

			<view class="btn3 tc" @click="onsubmit">确认支付</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				order_id: 0,
				order: {},
				payIdx: 1,
				showPop: false,
				config: {},
				cert: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			this.order_id = options.order_id
			let page = this;
			this.$core.get({
				url: '/xilujob.common/corporate',
				loading: false,
				success(ret, data) {
					page.config = ret.data
				}
			});
			this.fetchOrderDetail();
		},
		methods: {
			togglePop() {
				this.showPop = !this.showPop
			},
			payClick(index) {
				this.payIdx = index
			},
			choosePackageOrder(e) {
				if (this.order.cert_up == 1) {
					uni.showModal({
						title: '提示',
						content: '您已上传凭证，等待平台审核，确定更换支付',
						complete: (res) => {
							if (res.confirm) {
								this.payIdx = this.order.pay_type
								this.showPop = !this.showPop
							}
						}
					})
				} else {
					this.payIdx = this.order.pay_type
					this.showPop = !this.showPop
				}

			},

			fetchOrderDetail() {
				let page = this;
				page.$core.get({
					url: '/xilujob.package_order/detail',
					data: {
						order_id: this.order_id
					},
					loading: false,
					success(ret, data) {
						page.order = ret.data
					}
				});
			},


			/**
			 * 订单取消
			 */
			orderCancel(event) {
				let page = this;
				let order = this.order;

				let content = order.cert_up == 1 ? '您已上传凭证，等待平台审核，确定取消订单' : '是否取消支付？';
				uni.showModal({
					title: '提示',
					content: content,
					success: res => {
						if (res.confirm) {
							this.$core.post({
								url: '/xilujob.package_order/cancel',
								data: {
									package_order_id: order.id
								},
								success: ret => {
									page.fetchOrderDetail();
								}
							});
						}
					}
				})
			},

			/**
			 * 套餐购买
			 */
			onsubmit() {
				let packageOrder = this.order;
				let package_order_id = packageOrder.id;
				let config = this.config;
				//let ticket_type = this.data.ticketType;
				//let ticket = this.data.ticket;
				let pay_type = this.payIdx;
				//let remarks = this.data.remarks;
				let data = {
					platform: 'wxmini',
					order_id: package_order_id,
					//ticket_type:ticket_type,
					//ticket:ticket,
					pay_type: pay_type,
					corporate_company: config.corporate_company,
					open_bank: config.open_bank,
					corporate_account: config.corporate_account,
					//remarks:remarks
				}
				let page = this;
				if (pay_type == 1) {
					uni.login({
						success(wxRes) {
							let code = wxRes.code;
							this.$core.post({
								url: '/xilujob.user/wxlogin',
								data: {
									code: code
								},
								success: (ret, response) => {
									data['third_id'] = ret.data.third.third_id;
									page.payment(data);
								},
								fail: (ret, response) => {
									uni.showToast({
										title: '下单失败',
										icon: 'none'
									})
								}
							});
						},
					});
				} else {
					page.payment(data);
				}
			},
			payment(order) {
				let page = this;
				this.$core.post({
					url: '/xilujob.pay/pay',
					data: order,
					loading: true,
					success(ret, data) {
						if (order.pay_type == 1) {
							//发起支付
							uni.requestPayment({
								'timeStamp': ret.data.timeStamp,
								'nonceStr': ret.data.nonceStr,
								'package': ret.data.package,
								'signType': ret.data.signType,
								'paySign': ret.data.paySign,
								'success': function(res) {
									uni.showToast({
										icon: "none",
										title: '支付成功',
									})
									page.fetchOrderDetail();
									page.togglePop();
								},
								'fail': function(res) {
									uni.showToast({
										icon: "none",
										title: '支付失败',
									})
								},
								'complete': function(res) {

								}
							});
						} else {
							uni.showToast({
								title: ret.msg,
								icon: 'none'
							})
						}
					}
				});
			},
			//付款凭证
			uploadCert() {
				let page = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success(res) {
						page.$core.uploadFile({
							filePath: res.tempFiles[0].tempFilePath,
							success(ret, response) {
								page.cert = ret.data.url
							}
						});
					}
				})
			},
			certUp() {
				let page = this;
				if (this.cert == '') {
					uni.showToast({
						title: '请先上传凭证',
						icon: 'none'
					});
					return '';
				}
				this.$core.post({
					url: '/xilujob.package_order/up_cert',
					data: {
						package_order_id: this.order_id,
						cert: this.cert
					},
					success: ret => {
						page.fetchOrderDetail();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 0 0 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 20rpx 0 rgba(183, 189, 202, 0.2);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
	}

	.data {
		height: 150rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
	}

	.key {
		color: #898989;
	}

	.status1 {
		color: #FE3846;
	}

	.status2 {
		color: #101010;
	}

	.status3 {
		color: #555555;
	}

	.price {
		color: #FE3846;
	}

	.up-btn {
		padding: 75rpx 0 0;
		width: 230rpx;
		height: 230rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #AAAAAA;
		line-height: 40rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.img-up {
		display: block;
		width: 230rpx;
		height: 230rpx;
		border-radius: 10rpx;
	}


	.foot-btn1 {
		margin: 0 0 0 30rpx;
		width: 140rpx;
		height: 65rpx;
		border-radius: 5rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 24rpx;
		color: #555555;
		line-height: 65rpx;
		text-align: center;
	}

	.foot-btn2 {
		margin: 0 0 0 30rpx;
		width: 140rpx;
		height: 65rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		color: #FFF;
		line-height: 65rpx;
		text-align: center;
		background: var(--primary);
	}

	.icon1 {
		margin: 0 10rpx 0 0;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}



	.zz {
		z-index: 100;
	}

	.pay-pop {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 30rpx;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 5rpx 5rpx;
		z-index: 101;
		box-sizing: border-box;
	}

	.pay-pop .price {
		color: #FF7102;
	}

	.pay-pop .pay-item {
		margin: 0 0 30rpx;
		padding: 36rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 20rpx 0 rgba(183, 189, 202, 0.2);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
	}

	.pay-pop .icon1 {
		margin: 0 15rpx 0 0;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}

	.pay-pop .icon2 {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.pay-pop .btn3 {
		border-radius: 10rpx;
	}

	.pay-pop .info-box {
		margin-top: 30rpx;
		padding: 30rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
	}
</style>